<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短租排序</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body id="app">
    <div data-v-67ef3a4a class="csdheader">
        <div data-v-67ef3a4a class="layout clear">
            <div data-v-67ef3a4a class="left csdnav">
                <label data-v-67ef3a4a id="loginLobel">
                    <a data-v-67ef3a4a href="../pagehome/login.html" class="colorRed">登录</a>
                    <a data-v-67ef3a4a href="" class="colorRed">/</a>
                    <a data-v-67ef3a4a href="../pagehome/register.html" class="colorRed" style="margin-right: 10px;">注册</a>
                </label>

                <label data-v-67ef3a4a v-if="denglu" id="successLobel">
                    <a data-v-67ef3a4a href="#">你好，</a>
                    <a data-v-67ef3a4a href="#" class="colorRed" id="userName">/</a>
                    <a data-v-67ef3a4a href="../pagehome/index.html" onclick="exitLogin()" class="colorRed" style="margin-right: 10px;" id="exitLogin">[退出]</a>
                </label>

                <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
                <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
            </div>
            <div data-v-67ef3a4a="" class="right phone">
                <div data-v-67ef3a4a="" class="typeTab">
                    <a data-v-67ef3a4a="" href="index.html" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                    <a data-v-67ef3a4a="" href="../en/index.html">English</a>
                </div>
                <div data-v-67ef3a4a="" class="menu">
                    <a data-v-67ef3a4a="" href="../mymain/mymain.html">我的车速递</a>
                </div>
                <div data-v-67ef3a4a="">
                    <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                    <span data-v-67ef3a4a="" id="telSpan">400-919-8000</span>
                </div>
            </div>

        </div>
    </div>

    <div data-v-39f7f629 class="csdnav">
        <div data-v-39f7f629="" class="layout clear">
            <div data-v-39f7f629="" class="left logo">
                <a data-v-39f7f629="" href="index.html">
                    <img data-v-39f7f629="" src="">
                </a>
            </div>
            <div data-v-39f7f629="" class="left navCom">
                <ul data-v-39f7f629="">
                    <li data-v-39f7f629="" >

                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self" >优惠活动</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank" class="">网约车</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="/pagehome/index.html" target="_self" >
                            <span data-v-39f7f629="">首页</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="carListTab">
        <div class="selCarMsgCom">
            <div class="Msg" style="width: 500px" id="bmsel">取车地址：</div>
        </div>

        <div class="selCarMsgCom">
            <div class="Msg" id="hcs">还车地址：</div>
        </div>

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li id="zujinLi" class="layui-this" onclick="orderCar('zujin')">按租金排序</li>
                <li id="reduLi" onclick="orderCar('redu')">按热度排序</li>
            </ul>
            <div class="layui-tab-content">

                <div class="layui-tab-item layui-show" id="car">
                    <!--for循环这段代码-->
                </div>

            </div>
        </div>
    </div>

    <script>

        var storage = window.sessionStorage;
        //取车及换车城市的id
        var bmsel = storage.getItem('bmsel');
        var hcs = storage.getItem('hcs');

        layui.use(['jquery', 'table', 'layer', 'form'], function () {
            // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
            var $ = layui.$;
            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;

            var item = storage.getItem('user');
            var user = JSON.parse(item);
            if (user != null) {
                $("#userName").text(user.name);
                $("#telSpan").text(user.tel);
                $("#loginLobel").hide();
            } else {
                $("#successLobel").hide();
            }

            //获取取车换车城市信息
            $.ajax({
                url: "/getCityById/" + bmsel,
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#bmsel").text("取车地址：" + data.name);
                },
                error: function() {
                    console.log("ajax error");
                }
            });

            $.ajax({
                url: "/getCityById/" + hcs,
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#hcs").text("还车地址：" + data.name);
                },
                error: function() {
                    console.log("ajax error");
                }
            });

            orderCar('zujin');
        });

        function exitLogin(){
            storage.setItem('user', null);
        }

        //预定车
        function selectCar(id){
            console.log("id = " + id + " 取车地址" + bmsel + "换车地址" + hcs);
            //订单发送
            $.ajax({
                url: "/getCarById/" + id,
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    data = JSON.stringify(data);
                    storage.setItem('car', data);
                    window.location.href = "/order/ordersubmit.html";
                },
                error: function() {
                    console.log("ajax error");
                }
            });
        }

        function orderCar(orderCar){

            if (orderCar == 'redu'){
                $("#reduLi").attr("class", "layui-this");
                $("#zujinLi").attr("class", "");
                car("/getCarByRedu/" + bmsel + "/" + hcs);
            }else {
                $("#zujinLi").attr("class", "layui-this");
                $("#reduLi").attr("class", "");
                car("/getCarByCid/" + bmsel + "/" + hcs);
            }
        }

        function car(url){
            //获取车辆信息
            $.ajax({
                url: url,
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#car").empty();
                    for (var i in data){
                        $("#car").append("<div class=\"item clear\" id=\"carlis\">\n" +
                            "                        <div class=\"thisPlace clear\" id=\"carl\" v-for=\"site in cars\">\n" +
                            "                            <div class=\"itemCarImg left\">\n" +
                            "                                <img src=\""+ data[i].picture +"\">\n" +
                            "                            </div>\n" +
                            "                            <div class=\"itemCarMsg left\" >\n" +
                            "                                <h1>" + data[i].name + "</h1>\n" +
                            "                                <p>" + data[i].type +"</p><p>" + data[i].sitnum + "座</p>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"itemPriceMsg left\">\n" +
                            "                                <div class=\"itemPriceMsgC left\">\n" +
                            "                                    <p class=\"p1\">\n" +
                            "                                        <span>" + data[i].price + "</span>/日均\n" +
                            "                                    </p>\n" +
                            "                                </div>\n" +
                            "                                <div class=\"carLiBao\">5天以上立减 5元/天</div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"itemBtn left\">\n" +
                            "                                <button class=\"butt\" onclick=\"selectCar(" + data[i].id + ")\" >预定</button>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </div>");
                    }
                },
                error: function() {
                    console.log("ajax error");
                }
            });
        }

    </script>
</body>
</html>